<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="Hexo Theme Keep">
    <meta name="author" content="cheng5.du">
    
    <title>
        
            前端基础知识体系-JS(变量类型、原型) |
        
        cheng5.du
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/avatar.jpeg">
    
<link rel="stylesheet" href="/css/font-awesome.min.css">

    <script id="hexo-configurations">
    let KEEP = window.KEEP || {};
    KEEP.hexo_config = {"hostname":"example.com","root":"/","language":"zh-CN"};
    KEEP.theme_config = {"toc":{"enable":false,"number":false,"expand_all":false,"init_open":false},"style":{"primary_color":"#0066CC","avatar":"/images/avatar.jpeg","favicon":"/images/avatar.jpeg","article_img_align":"left","left_side_width":"260px","content_max_width":"920px","hover":{"shadow":false,"scale":false},"first_screen":{"enable":true,"background_img":"/images/bg.svg","description":"人生海海，来日方长。"},"scroll":{"progress_bar":{"enable":false},"percent":{"enable":false}}},"local_search":{"enable":false,"preload":false},"code_copy":{"enable":false,"style":"default"},"pjax":{"enable":false},"lazyload":{"enable":false},"version":"3.4.5"};
    KEEP.language_ago = {"second":"%s 秒前","minute":"%s 分钟前","hour":"%s 小时前","day":"%s 天前","week":"%s 周前","month":"%s 个月前","year":"%s 年前"};
  </script>
<meta name="generator" content="Hexo 6.1.0"></head>


<body>
<div class="progress-bar-container">
    

    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            <header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
            <a class="logo-title" href="/">
                cheng5.du
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                首页
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                归档
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/categories"
                            >
                                分类
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/tags"
                            >
                                标签
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/netease"
                            >
                                网抑云
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/about"
                            >
                                关于我
                            </a>
                        </li>
                    
                    
                </ul>
            </div>
            <div class="mobile">
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">首页</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">归档</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/categories">分类</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/tags">标签</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/netease">网抑云</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/about">关于我</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="article-content-container">

        <div class="article-title">
            <span class="title-hover-animation">前端基础知识体系-JS(变量类型、原型)</span>
        </div>

        
            <div class="article-header">
                <div class="avatar">
                    <img src="/images/avatar.jpeg">
                </div>
                <div class="info">
                    <div class="author">
                        <span class="name">cheng5.du</span>
                        
                    </div>
                    <div class="meta-info">
                        <div class="article-meta-info">
    <span class="article-date article-meta-item">
        <i class="fas fa-edit"></i>&nbsp;
        <span class="pc">2021-04-16 15:12:53</span>
        <span class="mobile">2021-04-16 15:12</span>
    </span>
    
        <span class="article-categories article-meta-item">
            <i class="fas fa-folder"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB/">知识体系</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/%E6%80%BB%E7%BB%93/">总结</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/JS/">JS</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
    
    
</div>

                    </div>
                </div>
            </div>
        

        <div class="article-content markdown-body">
            <h2 id="JS-变量类型和计算"><a href="#JS-变量类型和计算" class="headerlink" title="JS - 变量类型和计算"></a>JS - 变量类型和计算</h2><p><img src="https://cdn.jsdelivr.net/gh/superFatDu/blogPics@main/20210416/js-type.3to061fo1uu0.png" alt="js-type"></p>
<p>🚨 Notice：ES6新增值类型symbol</p>
<h3 id="typeof能判断哪些类型"><a href="#typeof能判断哪些类型" class="headerlink" title="typeof能判断哪些类型"></a>typeof能判断哪些类型</h3><ol>
<li>识别所有的值类型</li>
<li>识别函数</li>
<li>判断是否是引用类型（具体是什么不知道）</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> str = <span class="string">&#x27;string&#x27;</span>;   <span class="keyword">typeof</span> str;   <span class="comment">// &#x27;string&#x27;</span></span><br><span class="line"><span class="keyword">const</span> sy = <span class="title class_">Symbol</span>(<span class="string">&#x27;s&#x27;</span>); <span class="keyword">typeof</span> sy;    <span class="comment">// &#x27;symbol&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">typeof</span> <span class="keyword">function</span>(<span class="params"></span>) &#123;&#125;   <span class="comment">// &#x27;function&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">typeof</span> <span class="literal">null</span>         <span class="comment">// &#x27;object&#x27;</span></span><br><span class="line"><span class="keyword">typeof</span> [<span class="number">2</span>, <span class="number">3</span>]       <span class="comment">// &#x27;object&#x27;</span></span><br><span class="line"><span class="keyword">typeof</span> &#123;<span class="attr">x</span>: <span class="number">100</span>&#125;     <span class="comment">// &#x27;object&#x27;</span></span><br></pre></td></tr></table></figure>

<h3 id="x3D-x3D-x3D-和-x3D-x3D"><a href="#x3D-x3D-x3D-和-x3D-x3D" class="headerlink" title="&#x3D;&#x3D;&#x3D; 和 &#x3D;&#x3D;"></a>&#x3D;&#x3D;&#x3D; 和 &#x3D;&#x3D;</h3><p>&#x3D;&#x3D; 比较的时值，&#x3D;&#x3D;&#x3D; 比较的是值和类型。</p>
<p>🚨 Notice：&#x3D;&#x3D; 左右两边如果类型不同，则会进行类型转换。具体转换放下如下【类型转换】。</p>
<h3 id="值类型和引用类型的区别"><a href="#值类型和引用类型的区别" class="headerlink" title="值类型和引用类型的区别"></a>值类型和引用类型的区别</h3><p>如上图</p>
<h3 id="手写深拷贝"><a href="#手写深拷贝" class="headerlink" title="手写深拷贝"></a>手写深拷贝</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 简单深拷贝</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> &#123;<span class="type">Object</span>&#125; obj 要拷贝的对象</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">deepClone</span> (obj = &#123;&#125;) &#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> obj !== <span class="string">&#x27;object&#x27;</span> || obj == <span class="literal">null</span>) <span class="keyword">return</span> obj</span><br><span class="line">  <span class="keyword">let</span> result</span><br><span class="line">  obj <span class="keyword">instanceof</span> <span class="title class_">Array</span> ? result = [] : result = &#123;&#125;</span><br><span class="line">  <span class="keyword">for</span>(<span class="keyword">let</span> key <span class="keyword">in</span> obj) &#123;</span><br><span class="line">    <span class="keyword">if</span> (obj.<span class="title function_">hasOwnProperty</span>(key)) &#123;</span><br><span class="line">      result[key] = <span class="title function_">deepClone</span>(obj[key])</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> result</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="类型转换"><a href="#类型转换" class="headerlink" title="类型转换"></a>类型转换</h3><p>🚨 Notice：为了避免问题，除了 &#x3D;&#x3D; null之外，其他的一律使用 &#x3D;&#x3D;&#x3D;</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123; <span class="attr">x</span>: <span class="number">100</span> &#125;</span><br><span class="line"><span class="keyword">if</span> (obj.<span class="property">a</span> == <span class="literal">null</span>) &#123;&#125;</span><br><span class="line"><span class="comment">// 上面条件相当于</span></span><br><span class="line"><span class="keyword">if</span> (obj.<span class="property">a</span> === <span class="literal">null</span> || obj.<span class="property">a</span> === <span class="literal">undefined</span>) &#123;&#125;</span><br></pre></td></tr></table></figure>

<h4 id="类型转换流程"><a href="#类型转换流程" class="headerlink" title="类型转换流程"></a>类型转换流程</h4><ol>
<li>判断类型是否相同，若相同：<ol>
<li>相同进行&#x3D;&#x3D;&#x3D;比较。</li>
</ol>
</li>
<li>类型不同时，会进行类型转换：<ol>
<li>如果一个为null，一个为undefined，返回true。</li>
<li>如果一个为字符串，一个数值，那么在比较之前调用Number()函数将字符串转换成数值。</li>
<li>如果任一值值布尔值，则在比较之前调用Number()函数先转换成数值。</li>
<li>如果一个是对象，另一个是数值或者字符串，先将其转换成基础类型的值在比较。</li>
</ol>
</li>
</ol>
<h4 id="类型转换流程图"><a href="#类型转换流程图" class="headerlink" title="类型转换流程图"></a>类型转换流程图</h4><p><img src="https://cdn.jsdelivr.net/gh/superFatDu/blogPics@main/20210416/x==y.4190g1w1x1o.svg" alt="x==y"></p>
<h2 id="JS-原型和原型链"><a href="#JS-原型和原型链" class="headerlink" title="JS - 原型和原型链"></a>JS - 原型和原型链</h2><h3 id="原型链关系图1"><a href="#原型链关系图1" class="headerlink" title="原型链关系图1"></a>原型链关系图1</h3><p><img src="https://cdn.jsdelivr.net/gh/superFatDu/blogPics@main/20210419/%E5%8E%9F%E5%9E%8B%E9%93%BE%E5%85%B3%E7%B3%BB%E5%9B%BE.vpd.2y9mypmffn60.svg" alt="原型链关系图"></p>
<p>🚨 Notice：__proto__指向构造器的原型，即：__proto__ &#x3D;&#x3D;&#x3D; constructor.prototype。</p>
<h3 id="原型链关系图2"><a href="#原型链关系图2" class="headerlink" title="原型链关系图2"></a>原型链关系图2</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 父类</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">People</span> &#123;</span><br><span class="line">  <span class="title function_">constructor</span>(<span class="params">name</span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">name</span> = name</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">eat</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 字类</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Student</span> <span class="keyword">extends</span> <span class="title class_ inherited__">People</span> &#123;</span><br><span class="line">  <span class="title function_">constructor</span>(<span class="params">name, id</span>) &#123;</span><br><span class="line">    <span class="variable language_">super</span>(name)</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">id</span> = id</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">study</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 实例对象</span></span><br><span class="line"><span class="keyword">let</span> xiaoming = <span class="keyword">new</span> <span class="title class_">Student</span>(<span class="string">&#x27;xiaoming&#x27;</span>, <span class="string">&#x27;041322)</span></span><br></pre></td></tr></table></figure>

<p><img src="https://cdn.jsdelivr.net/gh/superFatDu/blogPics@main/20210419/%E5%8E%9F%E5%9E%8B%E9%93%BE%E5%9B%BE2.4m5sw8w49v20.svg" alt="pic2"></p>
<h3 id="如何判断一个变量是不是数组"><a href="#如何判断一个变量是不是数组" class="headerlink" title="如何判断一个变量是不是数组"></a>如何判断一个变量是不是数组</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> a = []</span><br><span class="line"></span><br><span class="line">a <span class="keyword">instanceof</span> <span class="title class_">Array</span> <span class="comment">// 方法1</span></span><br><span class="line"><span class="title class_">Array</span>.<span class="title function_">isArray</span>(a) <span class="comment">// 方法2</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(a) === <span class="string">&quot;[object Array]&quot;</span> <span class="comment">// 方法3</span></span><br></pre></td></tr></table></figure>

<h3 id="手写一个简易的jQuery，考虑插件和扩展性"><a href="#手写一个简易的jQuery，考虑插件和扩展性" class="headerlink" title="手写一个简易的jQuery，考虑插件和扩展性"></a>手写一个简易的jQuery，考虑插件和扩展性</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 基础</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">jQuery</span> &#123;</span><br><span class="line">  <span class="title function_">constructor</span>(<span class="params">selector</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> result = <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(selector)</span><br><span class="line">    <span class="keyword">const</span> length = result.<span class="property">length</span></span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; length; i++) &#123;</span><br><span class="line">      <span class="variable language_">this</span>[i] = result[i]</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">length</span> = length</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">selector</span> = selector</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">get</span>(<span class="params">index</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="variable language_">this</span>[index]</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">each</span>(<span class="params">fn</span>) &#123;</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="variable language_">this</span>.<span class="property">length</span>; i++) &#123;</span><br><span class="line">      <span class="keyword">const</span> ele = <span class="variable language_">this</span>[i]</span><br><span class="line">      <span class="title function_">fn</span>(ele)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">on</span>(<span class="params">type, fn</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="title function_">each</span>(<span class="function"><span class="params">ele</span> =&gt;</span> &#123;</span><br><span class="line">      ele.<span class="title function_">addEventListener</span>(type, fn, <span class="literal">false</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 插件</span></span><br><span class="line">jQuery.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">dialog</span> = <span class="keyword">function</span> (<span class="params">info</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(info)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 扩展性 =&gt; 造轮子</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">myjQuery</span> <span class="keyword">extends</span> <span class="title class_ inherited__">jQuery</span> &#123;</span><br><span class="line">  <span class="title function_">constructor</span>(<span class="params">selector</span>) &#123;</span><br><span class="line">    <span class="variable language_">super</span>(selector)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 扩展自己的方法</span></span><br><span class="line">  <span class="title function_">addClass</span>(<span class="params">className</span>) &#123;</span><br><span class="line">    <span class="comment">// TODO</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="class"><a href="#class" class="headerlink" title="class"></a>class</h3><blockquote>
<p>语法糖，实际上还是function。</p>
</blockquote>
<h4 id="class基础使用"><a href="#class基础使用" class="headerlink" title="class基础使用"></a>class基础使用</h4><p>🚨 Notice：constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 类</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Demo</span> &#123;</span><br><span class="line">  <span class="title function_">constructor</span>(<span class="params">name, age</span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">name</span> = name</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">age</span> = age</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">sayHalo</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`I&#x27;m <span class="subst">$&#123;<span class="variable language_">this</span>.name&#125;</span>,<span class="subst">$&#123;<span class="variable language_">this</span>.age&#125;</span> years old.`</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 通过类声明一下实例</span></span><br><span class="line"><span class="keyword">const</span> demo = <span class="keyword">new</span> <span class="title class_">Demo</span>(<span class="string">&#x27;cheng5&#x27;</span>, <span class="number">28</span>)</span><br><span class="line">demo.<span class="title function_">sayHalo</span>() <span class="comment">// I&#x27;m cheng5,28 years old.</span></span><br></pre></td></tr></table></figure>

<h4 id="class继承"><a href="#class继承" class="headerlink" title="class继承"></a>class继承</h4><p>🚨 Notice：实例的属性除非显示定义在本身（this）上（如name，age）,否则都定义在原型上（如sayHalo, eat）。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">demo.<span class="title function_">hasOwnProperty</span>(<span class="string">&#x27;name&#x27;</span>) <span class="comment">// true</span></span><br><span class="line">demo.<span class="title function_">hasOwnProperty</span>(<span class="string">&#x27;sayHalo&#x27;</span>) <span class="comment">// false</span></span><br><span class="line">demo.<span class="property">__proto__</span>.<span class="title function_">hasOwnProperty</span>(<span class="string">&#x27;sayHalo&#x27;</span>) <span class="comment">// true 方法在原型上</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 父类</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Person</span> &#123;</span><br><span class="line">  <span class="title function_">constructor</span>(<span class="params">name</span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">name</span> = name</span><br><span class="line">  &#125;</span><br><span class="line">  eat () &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;干饭人&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 子类</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Worker</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Person</span> &#123;</span><br><span class="line">  <span class="title function_">constructor</span>(<span class="params">name, magor</span>) &#123;</span><br><span class="line">    <span class="variable language_">super</span>(name)</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">magar</span> = magor</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">work</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;打工魂&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 通过类声明一下实例</span></span><br><span class="line"><span class="keyword">const</span> worker = <span class="keyword">new</span> <span class="title class_">Worker</span>(<span class="string">&#x27;小扳手&#x27;</span>, <span class="string">&#x27;搬砖&#x27;</span>)</span><br><span class="line">student.<span class="title function_">eat</span>() <span class="comment">// 干饭人</span></span><br><span class="line">student.<span class="title function_">work</span>() <span class="comment">// 打工魂</span></span><br></pre></td></tr></table></figure>

<h4 id="class的本质，怎么理解"><a href="#class的本质，怎么理解" class="headerlink" title="class的本质，怎么理解"></a>class的本质，怎么理解</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Demo</span> &#123;&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">typeof</span> <span class="title class_">Demo</span> <span class="comment">// &#x27;function&#x27;</span></span><br></pre></td></tr></table></figure>

<p>本质是’function‘，ES6语法糖。</p>
<h4 id="类型判断"><a href="#类型判断" class="headerlink" title="类型判断"></a>类型判断</h4><blockquote>
<p>instanceof：用来检测 constructor.prototype 是否存在于参数 object 的原型链上。</p>
</blockquote>
<p>🚨 Notice：如果 A instanceof B，那么会满足：A.__proto__(一个或者n个) &#x3D; B.prototype</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">worker <span class="keyword">instanceof</span> <span class="title class_">Worker</span> <span class="comment">// true =&gt; Worker.prototype在worker的原型链上</span></span><br><span class="line">worker <span class="keyword">instanceof</span> <span class="title class_">Person</span> <span class="comment">// true</span></span><br><span class="line">worker <span class="keyword">instanceof</span> <span class="title class_">Object</span> <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line">[] <span class="keyword">instanceof</span> <span class="title class_">Array</span>  <span class="comment">// true</span></span><br><span class="line">[] <span class="keyword">instanceof</span> <span class="title class_">Object</span> <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line">&#123;&#125; <span class="keyword">instanceof</span> <span class="title class_">Object</span> <span class="comment">// true</span></span><br></pre></td></tr></table></figure>

<h5 id="写一个函数，标识instanceOf的原理"><a href="#写一个函数，标识instanceOf的原理" class="headerlink" title="写一个函数，标识instanceOf的原理"></a>写一个函数，标识instanceOf的原理</h5><blockquote>
<p>算法参考链表遍历</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">instanceOf</span> = (<span class="params">A, B</span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">let</span> p = A</span><br><span class="line">  <span class="keyword">while</span>(p) &#123;</span><br><span class="line">    <span class="keyword">if</span> (p === B.<span class="property"><span class="keyword">prototype</span></span>) <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line">    p = p.<span class="property">__proto__</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="看代码写出输出"><a href="#看代码写出输出" class="headerlink" title="看代码写出输出"></a>看代码写出输出</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line"><span class="keyword">let</span> F = &#123;&#125;</span><br><span class="line"></span><br><span class="line"><span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">a</span> = <span class="string">&#x27;value a&#x27;</span></span><br><span class="line"><span class="title class_">Function</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">b</span> = <span class="string">&#x27;value b&#x27;</span></span><br><span class="line"></span><br><span class="line">conslole.<span class="title function_">log</span>(foo.<span class="property">a</span>)</span><br><span class="line">conslole.<span class="title function_">log</span>(foo.<span class="property">b</span>)</span><br><span class="line">conslole.<span class="title function_">log</span>(F.<span class="property">a</span>)</span><br><span class="line">conslole.<span class="title function_">log</span>(F.<span class="property">b</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// expected output</span></span><br><span class="line">a</span><br><span class="line">b <span class="comment">// 函数的原型脸上能找到Object.prototype和Funciton.prototyp</span></span><br><span class="line">a</span><br><span class="line"><span class="literal">undefined</span> <span class="comment">// 对象的原型脸上只能找到Object.prototype</span></span><br></pre></td></tr></table></figure>

        </div>

        

        
            <ul class="post-tags-box">
                
                    <li class="tag-item">
                        <a href="/tags/%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB/">#知识体系</a>&nbsp;
                    </li>
                
                    <li class="tag-item">
                        <a href="/tags/%E6%80%BB%E7%BB%93/">#总结</a>&nbsp;
                    </li>
                
                    <li class="tag-item">
                        <a href="/tags/JS/">#JS</a>&nbsp;
                    </li>
                
            </ul>
        

        
            <div class="article-nav">
                
                    <div class="article-prev">
                        <a class="prev"
                           rel="prev"
                           href="/2021/04/21/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-JS(%E4%BD%9C%E7%94%A8%E5%9F%9F%E3%80%81%E9%97%AD%E5%8C%85%E3%80%81this)/"
                        >
                            <span class="left arrow-icon flex-center">
                              <i class="fas fa-chevron-left"></i>
                            </span>
                            <span class="title flex-center">
                                <span class="post-nav-title-item">前端基础知识体系-JS(作用域、闭包、this)</span>
                                <span class="post-nav-item">上一篇</span>
                            </span>
                        </a>
                    </div>
                
                
                    <div class="article-next">
                        <a class="next"
                           rel="next"
                           href="/2021/04/15/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-HTML&amp;CSS/"
                        >
                            <span class="title flex-center">
                                <span class="post-nav-title-item">前端基础知识体系-HTML&amp;CSS</span>
                                <span class="post-nav-item">下一篇</span>
                            </span>
                            <span class="right arrow-icon flex-center">
                              <i class="fas fa-chevron-right"></i>
                            </span>
                        </a>
                    </div>
                
            </div>
        

        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            <footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
              <span>2020</span>
              -
            
            2023&nbsp;<i class="fas fa-heart icon-animate"></i>&nbsp;<a href="/">cheng5.du</a>
        </div>
        
        <div class="theme-info info-item">
            Powered by <a target="_blank" href="https://hexo.io">Hexo</a>&nbsp;|&nbsp;Theme&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.4.5</a>
        </div>
        
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        

        <!-- go comment -->
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-expand-width flex-center">
            <i class="fas fa-arrows-alt-h"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="fas fa-arrow-up"></i>
            </li>
        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
    </ul>
</div>

    </div>

    

    <div class="image-viewer-container">
    <img src="">
</div>


    

</main>




<script src="/js/utils.js"></script>

<script src="/js/main.js"></script>

<script src="/js/header-shrink.js"></script>

<script src="/js/back2top.js"></script>

<script src="/js/dark-light-toggle.js"></script>








<div class="post-scripts">
    
</div>



</body>
</html>
